<template>
  <div>
    <!-- 树形组件 -->
    <el-tree
      ref="elTreeRef"
      :data="permissionLisTree"
      show-checkbox
      node-key="id"
      default-expand-all
      check-strictly
      :props="defaultProps"
    />
    <el-row class="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button size="small" @click="cancelButton">取 消</el-button>
        <el-button size="small" type="primary" @click="setRolesBtn">确 定</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'AssignPermission',
  props: {
    roleId: {
      type: [Number, String],
      default: null
    },
    permissionLisTree: {
      type: Array,
      default: null,
      required: true
    }
  },
  data() {
    return {
      // 控制树形组件的展示
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    // console.log(this.roleId)
  },
  methods: {
    // 取消按钮
    cancelButton() {
      //   清空表单
      this.$refs.elTreeRef.setCheckedKeys([])

      //   关闭
      this.$emit('update:close', false)
    },

    // 设置权限按钮
    setRolesBtn() {
      // 发送选好的权限点给父组件
      this.$emit('CheckedKey', this.$refs.elTreeRef.getCheckedKeys())
      // console.log(this.$refs.elTreeRef.getCheckedKeys())
      //   清空表单
      this.$refs.elTreeRef.setCheckedKeys([])
    }
  }
}
</script>

<style lang="scss" scoped>
.footer {
  margin-top: 30px;
}
</style>
